<template>
  <div class="header">
    <a href="">
      <img src="@/assets/logo.png" alt="" class="logo" />
      <span class="title">学员管理系统</span>
    </a>

    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        {{ user.username }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a" icon="el-icon-edit">
          修改密码</el-dropdown-item
        >
        <el-dropdown-item command="b" icon="el-icon-cold-drink">
          退出登录</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
    <span class="date-weather">
      <span class="date">{{ currentTime }}</span>
      &nbsp;&nbsp; | &nbsp;&nbsp;
      <span class="weather"
        ><i :class="wea_img"></i>&nbsp;&nbsp;{{ wea }}&nbsp;&nbsp;{{
          tem_day
        }}°C &nbsp;/&nbsp; {{ tem_night }}°C</span
      >
    </span>
    <el-dialog title="修改密码" :visible.sync="dialogTableVisible" width:500px>
      <el-form
        :model="userForm"
        status-icon
        :rules="rules"
        ref="userForm"
        label-width="100px"
        style="width: 400px"
      >
        <el-form-item label="原密码" prop="oldPass">
          <el-input type="password" v-model="userForm.oldPass"></el-input>      
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="userForm.pass"></el-input>      
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="userForm.checkPass"></el-input>    
           
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('userForm')"
            >提交</el-button
          >
          <el-button @click="$refs['userForm'].resetFields()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { reqWeather } from "@/api/jsonp.js";
import { formateDate } from "@/utils/dateUtils.js";
import memoryUtils from "@/utils/memoryUtils";
import storageUtils from "@/utils/storageUtils";
import userApi from "@/api/user";
export default {
  data() {
    const validateOldPass = (rule, value, callback) => {
      // callback(new Error("请输入密码"));
      userApi.checkPwd(this.user._id, value).then((response) => {
        const resp = response.data;
        if (resp.status == 0) {
          callback();
        } else {
          callback(new Error(resp.msg));
        }
      });
    };
    const validatePass = (rule, value, callback) => {
      if (value != this.userForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      dialogTableVisible: false,
      userForm: {
        oldPass: "",
        pass: "",
        checkPass: "",
      },
      user:memoryUtils.user,
      currentTime: formateDate(Date.now()),
      tem_day: "",
      wea: "",
      wea_img: "",
      tem_night: "",
      rules: {
        oldPass: [
          { required: true, message: "旧密码不能为空", trigger: "blur" },
          {
            validator: validateOldPass,
            tigger: "blur",
          },
        ],
        pass: [
          {
            required: true,
            message: "新密码不能为空",
            tigger: "blur",
          },
        ],
        checkPass: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          {
            validator: validatePass,
            tigger: "change",
          },
        ],
      },
    };
  },

  components: {},

  mounted() {
    this.getWeather();
    this.getTime()
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          userApi
            .updatePwd(this.user._id, this.userForm.checkPass)
            .then((response) => {
              const resp = response.data;
              console.log(resp);
              this.$message({
                message: resp.msg,
                type: resp.statue === 0 ? "success" : "warning",
              });
              if (resp.status == 0) {
                this.handleLogout();
                this.dialogTableVisible = false;
              }
            });
        } else {
          return false;
        }
      });
    },
    handlePwd() {
      this.dialogTableVisible = true;
      this.$nextTick(() => {
        this.$refs["userForm"].resetFields();
      });
    },
    handleLogout() {
      console.log(0);
      memoryUtils.user = {};
      storageUtils.removeUser();
      this.$router.replace("/login");
    },
    handleCommand(command) {
      switch (command){
      case "a":
      this.handlePwd();
      //修改密码
      break;
      case "b":
      //退出系统
      // memoryUtils.user = {};
      // storageUtils.removeUser ();
      // this.$router.replace ("/login")
      this.handleLogout();
      break;
      default:
      break;
}

    },
    getWeather() {
      reqWeather("哈尔滨").then((res) => {
        console.log("天气信息", res);
        const {wea,wea_img,tem1,tem2} = res
        const weaImgs = {
          xue: "el-icon-light-rain",
          lei: "el-icon-lightning",
          shachen: "el-icon-sunrise-1",
          wu: "el-icon-partly-cloudy",
          bingbao: "el-icon-ice-cream-square",
          yun: "el-icon-cloudy",
          yu: "el-icon-heavy-rain",
          yin: "el-icon-cloudy-and-sunny",
          qing: "el-icon-sunny",
        };
        this.tem_day = tem1
        this.tem_night = tem2
        this.wea = wea
        this.wea_img = weaImgs[wea_img]
      });
    },
    getTime(){
        setInterval(() => {
            this.currentTime = formateDate(Date.now())
        }, 1000);
    }
  },
};
</script>

<style scoped>
.logo {
  vertical-align: middle;
  padding: 0 10px 0 40px;
  width: 25px;
}
.title {
  color: #fff;
  text-decoration: none;
  position: absolute;
}
.el-dropdown {
  float: right;
  margin-right: 40px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fcfeff;
}
.date-weather {
  float: right;
  color: #fff;
  margin-right: 30px;
  font-size: 12px;
}
</style>